<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html>
<html>
<head>
	<title>图片</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"
		  href="easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<!-- <link rel="stylesheet" type="text/css" href="easyui/demo.css"> -->
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script src="js/yangshi.js"></script>
	<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
	<style type="text/css">
		td{
			height: 30px;
		}
		#xinzeng tr{
			height: 35px;
		}
		#xinzeng tr td:nth-child(2) {
			white-space: nowrap;
			width: 290px;
		}
		#xinzeng tr td:nth-child(3) {
			white-space: nowrap;
		}
		#xinzeng tr td:nth-child(4) {
			white-space: nowrap;
			width: 380px;
		}
		#xinzeng tr td:nth-child(1) {
			white-space: nowrap;
		}

	</style>
</head>
<body onload="">
<shiro:lacksPermission name="base:all">没有查询此模块权限。。。</shiro:lacksPermission>
<shiro:hasPermission name="base:all">
	<table id="dg" class="easyui-datagrid" style="width: 100%; height: auto"></table>


	<div id="tb" style="height: auto">
		<a href="javascript:void(0)" class="easyui-linkbutton"
		   data-options="iconCls:'icon-add',plain:true" onclick="addPicture()">新增</a>&nbsp;
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="deletePicture()">删除</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="updateBefore()">修改</a> </a>&nbsp;
	</div>

	<!-- 新增========================================================================================================= -->
	<div id="w" class="easyui-window" title="新增图片"
		 data-options="modal:true,closed:true,iconCls:'icon-save',maximizable:false,minimizable:false,closable: false,collapsible:false"
		 style="width: 500px; height: 200px; padding: 10px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'">
				<table id="xinzeng">
					<tr>
						<td>图片:</td>
						<td hidden="true"><input id="picturePath" placeholder="" class="easyui-textbox" style="width:78%;" type="hidden">
						</td>
						<td><input type="file" name="file" id="file" value="" multiple="multiple" /></td>
					</tr>
					<tr>
						<td>图片名:</td>
						<td><input id="pictureName" placeholder="" class="easyui-textarea" style="width:78%;"><span style="color: red;">&nbsp; *</span></td>
					</tr>
				</table>
				<div data-options="region:'south',border:true"
					 style="padding: 5px 0 0; position: absolute; right: 9px; bottom: 9px;">
					<button id="save" onclick="save()"
							class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</button>
					<button id="no" onclick="shutDown()"
							class="easyui-linkbutton" data-options="iconCls:'icon-no'">取消</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改========================================================================================================= -->
	<div id="up" class="easyui-window" title="修改图片"
		 data-options="modal:true,closed:true,iconCls:'icon-save',maximizable:false,minimizable:false,closable: false,collapsible:false"
		 style="width: 500px; height: 210px; padding: 10px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'">
				<table id="update">
					<tr>
						<td>图片:</td>
						<td id="photo"><%-- <img  id="img" style="width:40px; height:30px;" >--%></td>
						<td hidden="true"><input id="picturePath1" placeholder="" class="easyui-textbox" style="width:78%;" type="hidden">
						<td hidden="true"><input id="id" placeholder="" class="easyui-textbox" style="width:78%;" type="hidden"></td>

					</tr>
					<tr>
						<td>上传图片：</td>
						<td><input type="file" name="file" id="file1" value="" multiple="multiple" /></td>
					</tr>
					<tr>
						<td>图片名:</td>
						<td><input id="pictureName1" placeholder="" class="easyui-textbox" style="width:78%;"><span style="color: red;">&nbsp; *</span></td>
					</tr>
				</table>
				<div data-options="region:'south',border:true"
					 style="padding: 5px 0 0; position: absolute; right: 9px; bottom: 9px;">
					<button id="yes" onclick="updatePicture()"
							class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</button>
					<button id="cancle" onclick="shut()"
							class="easyui-linkbutton" data-options="iconCls:'icon-no'">取消</button>
				</div>
			</div>
		</div>
	</div>
	<!--图片========================================================================================================= -->
	<div id="picture" class="easyui-window" title="图片"
		 data-options="modal:true,closed:true,iconCls:'icon-save',maximizable:false,minimizable:false,closable: false,collapsible:false"
		 style="width: 400px; height: 300px; padding: 10px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'">
				<table id="pic">
					<tr>
						<%--<td>图片:</td>--%>
						<td id="pict"></td>
					</tr>
				</table>
				<div data-options="region:'south',border:true"
					 style="padding: 5px 0 0; position: absolute; right: 9px; bottom: 9px;">
					<button id="clos" onclick="clos()"
							class="easyui-linkbutton" data-options="iconCls:'icon-no'">关闭</button>
				</div>
			</div>
		</div>
	</div>
</shiro:hasPermission>

</body>
</html>
<script type="text/javascript">
    $(function(){
        getPagination();
    })
    function getPagination(){
        $("#dg").datagrid({
            url:'/clothing/picture/pictureList.do',
        });
    }
        //加载表单
        $("#dg").datagrid({
            //height: 340,
            // url: '/clothing/picture/pictureList.do',
            method: 'GET',
            toolbar: '#tb',
            fit: true,
            idField: 'id',
            striped: true,
            fitColumns: false,
            singleSelect: true,
            rownumbers: false,
            nowrap: true,
            pagination: false,
            pageSize: 20,
            pageList: [10, 20, 50, 100],
            showFooter: true,
            loadMsg: 0,
            columns: [[
                {
                    field: 'id',
                    title: 'id',
                    width: 100,
                    align: 'center',
                    hidden: true
                },
                {
                    field: 'pictureName',
                    title: '名称',
                    width: 120,
                    align: 'center'

                },
                {
                    field: 'picturePath',
                    title: '图片',
                    width: 100,
                    align: 'center',
                    formatter:function(value) {//使用formatter格式化刷子
						if(value!=null) {
                            return '<img  style="width:30px; height:30px;" src=' + value + '>';
                        }else{
						    return value;
						}
                    }
                },
                {
                    field: 'createBy',
                    title: '创建者',
                    width: 100,
                    align: 'center'

                },
                {
                    field: 'createDate',
                    title: '创建日期',
                    width: 100,
                    align: 'center',
                    formatter: function (value) {
                        if (value != null) {
                            return new Date(value).Format("yyyy/MM/dd hh:mm:ss");
                        } else {
                            return value;
                        }

                    }

                },
                {
                    field: 'updateBy',
                    title: '修改者',
                    width: 100,
                    align: 'center'

                },
                {
                    field: 'updateDate',
                    title: '修改日期',
                    width: 100,
                    align: 'center',
                    formatter: function (value) {
                        if (value != null) {
                            return new Date(value).Format("yyyy/MM/dd hh:mm:ss");
                        } else {
                            return value;
                        }

                    }

                }
            ]],
            loadFilter: function (responseData) {
                if (responseData.code != 0) {
                    $.messager.alert('出现意外', responseData.msg, 'warning');
                } else {
                    return responseData.data;
                }
            },
            onLoadSuccess: function () {
                $("#dg").datagrid('selectRow', 0);
            }
            ,onClickCell:function(index,field,value) {
                if(field =='picturePath') {
                    showImg(index, field, value);
                }
           }
        })

	//新增
	function addPicture(){
        $('#w').window('open')
	}
	function shutDown(){
        $('#w').window('close')
	}
    function clos(){
        $('#picture').window('close')
    }
	function showImg(index,field,value){
        var str= '<img style="width:290px; height:190px;" src=' + value + '>';
        $("#pict").html(str);
        $('#picture').window('open')
	}
    //保存
	function save(){
        var file=$("#file").val();
        if(file ==""){
            $.messager.alert('温馨提示','请选择上传的文件！','warning');
            return false;
        }
        var formData = new FormData();
        formData.append('file', $('#file')[0].files[0]);
        $.ajax({
            url:"/clothing/picture/fileUpload.do",
            type:"post",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType : "json",
            success:function(data){
                $("#picturePath").val(data.data);
                addPicture();
            },
            error:function(err){
               alert('网络连接失败,稍后重试');
                return false;
            }
        })
		function addPicture(){
            var pictureName = $("#pictureName").val()
            var picturePath = $("#picturePath").val()
            if(  pictureName ==''){
                $.messager.alert('提示!', '图片名不能为空!', 'warning');
                return;
            }
            $.ajax({
                url : "/clothing/picture/addPicture.do",
				type:"get",
                data : {
                    pictureName : pictureName,
                    picturePath : picturePath
                },
                dataType : "json",
                success : function(data) {
                    if (data.code==0) {
                        $('#w').window('close')
                        $('#w').form('clear')
                        getPagination();
                        $.messager.show({
                            title: '提示',
                            msg: '保存成功!',
                            timeout: 4000,
                            showType: 'slide'
                        })
                    }else{

                        alert('保存失败，请检查网络后重试!')

                    }
                }
            })
		}
	}
    function shut(){
        $('#up').window('close')
    }
	//修改打开
function	updateBefore(){
    $('#up').window('open')
    var row = $('#dg').datagrid('getSelected');
    $("#pictureName1").textbox("setValue", row.pictureName)
    $("#picturePath1").textbox("setValue", row.picturePath)
    var str= '<img  style="width:60px; height:50px;" src=' + row.picturePath + '>';
    $("#photo").html(str);

}
function updatePicture(){
  var file=$("#file1").val();
  if(file !=null && file!='') {
      var formData = new FormData();
      formData.append('file', $('#file1')[0].files[0]);
      $.ajax({
          url: "/clothing/picture/fileUpload.do",
          type: "post",
          cache: false,
          data: formData,
          processData: false,
          contentType: false,
          dataType: "json",
          success: function (data) {
              $("#picturePath1").val(data.data);
              upPicture();
          },
          error: function (err) {
              alert('网络连接失败,稍后重试');
              return false;
          }
      })
  }else{
      upPicture();
  }
    function upPicture(){
        var row = $('#dg').datagrid('getSelected');
        var pictureName1 = $("#pictureName1").val();
        var picturePath1 = $("#picturePath1").val();
        if(  pictureName1 ==''){
            $.messager.alert('提示!', '图片名不能为空!', 'warning');
            return;
		}
        $.ajax({
            url : "/clothing/picture/updatePicture.do",
            type:"get",
            data : {
                pictureName : pictureName1,
                picturePath : picturePath1,
				id:row.id
            },
            dataType : "json",
            success : function(data) {
                if (data.code==0) {
                    $('#up').window('close')
                    $('#up').form('clear')
                    getPagination();
                    $.messager.show({
                        title: '提示',
                        msg: '修改成功!',
                        timeout: 4000,
                        showType: 'slide'
                    })
                }else{

                    alert('保存失败，请检查网络后重试!')

                }
            }
        })
    }
}
	//删除
	function deletePicture(){
        var row = $('#dg').datagrid('getSelected');
            $.messager.confirm('确认删除', '确定要删除' + row.pictureName + '的这个图片吗?',
			function(r) {
                if (r) {
                    $.ajax({
                        url: "/clothing/picture/updateDelFlag.do",
                        type: "get",
                        data: {
                            id: row.id
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 0) {
                                getPagination();
                                $.messager.show({
                                    title: '提示',
                                    msg: '删除成功!',
                                    timeout: 4000,
                                    showType: 'slide'
                                })
                            } else {
                                alert('删除失败，请检查网络后重试!')
                            }
                        }
                    })
                }
            })
	}
    //格式化时间
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S": this.getMilliseconds()
            //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                    : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>